<template>
  <!-- 二维码登入 -->
   <div id="WeChat" v-show="wechat">
        <svg class="icon icon-diannaojiaobiao" aria-hidden="true" @click="commons">
            <use xlink:href="#icon-diannaojiaobiao"></use>
        </svg>
        <h1>微信扫码登入</h1>
        <div class="WCimg">
            <div v-loading="loading" >
            <img :src="qrImg" alt="" width="200px">
            </div>
            <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
        </div>
        <p>
            <!-- <svg class="icon icon-weixin" aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
            </svg> -->
            <!-- <span>请用手机扫码登陆</span> -->
            <span v-text="qrtip"></span>
        </p>
    </div>
</template>
<script>
    //引入socket.io
    import socketIo from "socket.io-client"
    //引入qrcode
    import qrcode from "qrcode"
    //引入api
    import * as api from "@/api/users"
    //引入成功和失败扫码遮罩图片
    import invalidImg from "../../assets/images/invalidQr.png"
    import scanSuccessImg from "../../assets/images/scancode.png"
    import storage from "../../utils/storage"
    export default{
        data(){
            return{
                //二维码图片
                qrImg:"",
                //是否显示遮罩
                showQrMask:false,
                //遮罩背景样式
                maskBg:{ backgroundImage:`url(${scanSuccessImg})` },//扫码成功
                // maskBgInvalid:{ background:url(invalidImg) },//二维码失效
                qrtip:"请使用手机微信扫码登入",
                //二维码加载动画
                loading:true
            }
        },
        props:['wechat','common'],
        created(){
            //建立socket连接
            let io = socketIo('wss://chst.vip')
            //监听连接的事件
            io.on('connectSuccess',async ({sid}) => {
                // console.log(sid);
                //将sid存到本地
                storage.set('wc-sid',sid)

                this.getQrUrl(sid)
                this.Loading=false

                
            })
            //无效的二维码
            io.on("invalidCode",data => {
                console.log(data);
                //展示遮罩
                this.showQrMask = true
                //显示无效的二维码遮罩样式
                this.maskBg.backgroundImage = `url(${invalidImg})`
                this.qrtip="二维码失效,请点击刷新二维码"
            })
            //扫码成功
            io.on('scancodeSuccess',async ({state,wechatCode,msg}) => {
                // console.log(data);
                //扫码成功显示遮罩
                this.showQrMask = true
                this.maskBg.backgroundImage = `url(${scanSuccessImg})`
                this.qrtip="扫码成功"
                if(state){
                    //调用微信登陆的接口
                    let res = await api.wechatLoginApi(wechatCode)
                    console.log(res);
                    this.storageUserInfo(res.data)
                    
                    //跳转到主页 
                    this.$router.push("/welcome")

                }else{
                    console.error(msg);
                }

            })
        },
        mounted () {
            
        },
        methods: {
            commons(){
                this.$emit('commons')
            },
            async getQrUrl(sid){
                //打开加载动画
                this.loading = true
                //请求获取二维码地址
                let res = await api.getQrCodeApi(sid)
                // console.log(res);
                let { scanCodeUrl:qrcodeUrl } = res.data;
                //通过qrcode插件，生成二维码
                qrcode.toDataURL(qrcodeUrl,(err,img) => {
                    if(err){
                        throw err
                    }
                    // console.log(img);
                    this.qrtip="请使用手机微信扫码登入"
                    this.qrImg=img

                    //关掉遮罩
                    this.showQrMask = false
                    //关闭加载动画
                    this.loading = false
                }) 
            },
            //更新二维码地址
            updateQr(){
                //获取本地存储的sid
                let sid = storage.get('wc-sid')
                console.log(sid);
                this.getQrUrl(sid)
                this.Loading=false
            },
            //封装一个方法 用于存储用户的信息和token
            storageUserInfo({ userInfo, token, permission }){
            storage.set('userInfo',userInfo )
            storage.set('sasa-token', token)
            storage.set('permission', permission)
            // let r = storage.get('userInfo')
            // console.log(r);
            },
        },
    }
</script>

<style scoped lang="less">
h1,p{
    margin: 0 0 60px 0;
    text-align: center;
    color: #000;
}
p{
    margin: 16px 0;
}

.WCimg{
    width: 200px;
    height: 200px;
    // background-color: #999;
    margin-left: 100px;
    display: inline-block;
    position: relative;
}
.WCimg img{
    // width: 100%;
    position: absolute;
    left: 0;
}
.icon-diannaojiaobiao{
    position: absolute;
    right:10px;
    top:10px;
    font-size:60px!important;
    color: #bfc3d2!important;
}
.icon-weixin{
    font-size: 18px!important;
}
.mask{
    position: absolute;
    left: 0;
    width: 200px;
    height: 200px;
    opacity: .8;
    background-color: #fff;
    background-image: url("../../assets/images/erweima2.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    z-index:999;
    cursor: pointer;
}
</style>